<template>
<div class="shopping-carts" :class="showCartDialog ? 'active' : ''">
    <div class="header">
      <div class="title">购物车</div>
      <div class="close" @click="showCartDialog = false">></div>
      <div class="select-all">
        <input type="checkbox" v-model="isSelectAll" @change="selectAll" /><span>全选</span>
      </div>
      <div class="del-selected" @click="deleteCart()">批量删除</div>
    </div>
    <ul class="product">
      <li class="item" v-for="item in cartListCopy" :key="item.id">
        <div class="checkbox">
          <input type="checkbox" v-model="item.isSelect" @change="selectOne" />
        </div>
        <div class="carts-product-info">
          <div class="img">
            <div><img :src="item.full_icon_src" /></div>
          </div>
          <div class="info">
            <div class="title omit">{{item.name}}</div>
          </div>
          <div class="price-and-del">
            <div class="price">¥ {{item.price}}</div>
            <div class="del" @click="deleteCart(item)">删除</div>
          </div>
        </div>
      </li>
    </ul>
    <div class="bottom">
      <div class="count">
        <div class="total-num"><span>作品总数</span><span class="num">{{getSelectCount}}</span><span>组</span></div>
        <div class="total-price"><span>总价：</span><span class="price">¥ {{getTotalPrice}}</span></div>
      </div>
      <p class="buy mt10 hand" href="javascript:;" @click="openConfirmOrderDialog"><span>提交订单</span></p>
    </div>

</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deepCloneData } from '@/plugins/string'

export default {
  data() {
    return {
      showCartDialog: false,
      isSelectAll: true,
      cartListCopy: [],
    }
  },
  computed: {
    ...mapGetters(['cartList']),
    // 获取商品总数
    getSelectCount() {
      if (this.cartListCopy && this.cartListCopy.length > 0) {
        // console.log(this.cartListCopy)
        let list = this.cartListCopy.filter(item => item.isSelect)
        return list.length
      }
      return 0
    },
    // 获取总价
    getTotalPrice() {
      if (this.cartListCopy && this.cartListCopy.length > 0) {
        let list = this.cartListCopy.filter(item => item.isSelect)
        let total = 0
        list.map(item => {
          total += item.price
        })
        return total
      }
      return 0
    },
  },
  watch: {
    cartList: {
      handler(val) {
        console.log(val)
        // 深克隆报错
        this.cartListCopy = JSON.parse(JSON.stringify(val))
        // this.cartListCopy = deepCloneData(val)
      },
      deep: true
    },
  },
  methods: {
    openDialog() {
      this.showCartDialog = true
    },
    // 单选
    selectOne() {
      // console.log('555---------')
      let selectList = this.cartListCopy.filter(item => item.isSelect)
      if (selectList.length == this.cartListCopy.length) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }
    },
    // 全选
    selectAll() {
      if (this.isSelectAll) {
        this.cartListCopy.map(item => {
          item.isSelect = true
        })
      } else {
        this.cartListCopy.map(item => {
          item.isSelect = false
        })
      }
    },
    // 删除方法
    deleteCartFunc(ids) {
      this.$api.deleteCartProduct(ids).then(res => {
        console.log(res)
        if (res.code == 100) {
          this.$vgo.tip('操作成功', 'success')
          this.$store.dispatch('getCartList')
        }
      })
    },
    // 删除
    deleteCart(item) {
      this.$vgo.open(() => {
        if (item) {
          // 单个删除
          this.deleteCartFunc(item.id)
        } else {
          // 批量删除
          let ids = ''
          this.cartListCopy.map(item => {
            if (item.isSelect) {
              ids += item.id + ','
            }
          })
          console.log(ids)
          if (!ids) {
            return this.$vgo.tip('请先选择商品', 'warning')
          }
          this.deleteCartFunc(ids.slice(0, ids.length))
        }
      })
    },
    // 提交订单
    openConfirmOrderDialog() {
      // console.log(this.cartListCopy)
      let list = this.cartListCopy.filter(item => item.isSelect)
      if (list.length > 0) {
        console.log(list)
        this.$vgo.emit('showDialogModal', { name: 'ConfirmOrder', data: list })
      } else {
        this.$vgo.tip('请先选择商品', 'warning')
      }
    },
  },
  // created() {
  //   this.$store.dispatch('getCartList')
  // }
}
</script>

<style lang="stylus" scoped>
  .shopping-carts {
    width: 400px;
    position: fixed;
    right: 0;
    top: 51px;
    height: calc(100vh - 51px);
    z-index: 2;
    border-left: 1px solid #aaa;
    background-color: #e9e9e9;
    // overflow-y: auto;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(1, -0.35, 0, 1.31);
    -o-transition: all 0.5s cubic-bezier(1, -0.35, 0, 1.31);
    transition: all 0.5s cubic-bezier(1, -0.35, 0, 1.31);
  }

  .shopping-carts.active {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
  }

  .shopping-carts .header {
      height: 90px;
      position: relative;
  }

      .shopping-carts .header .title {
          padding: 15px 0 0 10px;
          font-size: 22px;
          color: #333;
      }

      .shopping-carts .header .close {
          position: absolute;
          right: 10px;
          top: 15px;
          cursor: pointer;
          font-size: 14px;
          border-radius: 50%;
          text-align: center;
          color: #666;
          width: 20px;
          height: 20px;
          line-height: 18px;
          display: inline-block;
          border: 1px solid #666;
      }

      .shopping-carts .header .select-all {
          position: absolute;
          bottom: 15px;
          left: 15px;
      }

          .shopping-carts .header .select-all input {
              width: 15px;
              height: 15px;
              vertical-align: -3px;
              margin-right: 6px;
          }

      .shopping-carts .header .del-selected {
          position: absolute;
          bottom: 10px;
          left: 90px;
          background-color: #F56C6C;
          padding: 5px 15px;
          color: #fff;
          border-radius: 3px;
          cursor: pointer;
      }

      .shopping-carts .header .myorder {
          position: absolute;
          bottom: 10px;
          left: 200px;
          background-color: #409EFF;
          padding: 5px 15px;
          color: #fff;
          border-radius: 3px;
          cursor: pointer;
      }

  .shopping-carts .product {
      width: 100%;
      height: calc(100vh - 232px);
      overflow-y: auto;
  }

      .shopping-carts .product .item {
          height: 100px;
          background-color: #fff;
          margin-bottom: 10px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          padding: 20px 15px 0;
      }

          .shopping-carts .product .item .checkbox {
              height: 60px;
              line-height: 60px;
              margin-right: 10px;
          }

              .shopping-carts .product .item .checkbox input {
                  height: 15px;
                  width: 15px;
              }

          .shopping-carts .product .item .carts-product-info {
              height: 60px;
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
          }

              .shopping-carts .product .item .carts-product-info .img {
                  height: 100%;
                  width: 60px;
              }

                  .shopping-carts .product .item .carts-product-info .img img {
                      height: 100%;
                      width: 100%;
                  }

              .shopping-carts .product .item .carts-product-info .info {
                  -webkit-box-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  height: 60px;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  width: 200px;
                  -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                  justify-content: space-between;
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                  -ms-flex-direction: column;
                  flex-direction: column;
                  padding-left: 20px;
              }

                  .shopping-carts .product .item .carts-product-info .info .title {
                      font-size: 16px;
                      color: #333;
                  }

                  .shopping-carts .product .item .carts-product-info .info .desc {
                      font-size: 14px;
                      color: #666;
                  }

              .shopping-carts .product .item .carts-product-info .price-and-del {
                  height: 60px;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                  justify-content: space-between;
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                  -ms-flex-direction: column;
                  flex-direction: column;
              }

                  .shopping-carts .product .item .carts-product-info .price-and-del .price {
                      color: #f00;
                      font-size: 16px;
                  }

                  .shopping-carts .product .item .carts-product-info .price-and-del .del {
                      text-align: right;
                      cursor: pointer;
                      font-size: 14px;
                      color: #666;
                      cursor: pointer;
                  }

                      .shopping-carts .product .item .carts-product-info .price-and-del .del:hover {
                          color: #f00;
                      }

  .shopping-carts .bottom {
      position: absolute;
      left: 0;
      padding: 5px 20px;
      width: 100%;
      bottom: 3px;
      overflow: hidden;
      background-color: #e9e9e9;
  }

      .shopping-carts .bottom .count {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
      }

          .shopping-carts .bottom .count .total-num {
              font-size: 14px;
              color: #333;
          }

              .shopping-carts .bottom .count .total-num span.num {
                  margin: 0 5px;
                  color: #3b9ff3;
              }

          .shopping-carts .bottom .count .total-price {
              font-size: 14px;
              color: #333;
          }

              .shopping-carts .bottom .count .total-price span.price {
                  font-size: 16px;
                  color: #f00;
              }

      .shopping-carts .bottom .agreement {
          font-size: 14px;
          color: #333;
      }

          .shopping-carts .bottom .agreement a.detail {
              color: #3b9ff3;
          }

      .shopping-carts .bottom p.buy {
          width: 360px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #3b9ff3;
          color: #fff;
          display: inline-block;
          margin-bottom: 10px;
      }

          .shopping-carts .bottom p.buy i {
              font-size: 12px;
              border-radius: 50%;
              width: 16px;
              height: 16px;
              line-height: 16px;
              display: inline-block;
              border: 1px solid #fff;
              margin-left: 10px;
          }
</style>